<template>
  <div class="comment-name">
    <!-- 导航栏 -->
    <van-nav-bar
        title="修改昵称"
        left-text="取消"
        right-text="保存"
        @click-left="$emit('close')"
        @click-right="updateName"
    />

    <!-- 输入框 -->
    <div class="van_field">
        <van-field
            v-model.trim="locaName"
            rows="2"
            autosize
            type="textarea"
            maxlength="7"
            placeholder="请输入昵称"
            show-word-limit
        />
    </div>
  </div>
</template>

<script>
import {updateUserProfile} from '@/api/user'
export default {
    name:'CommentName',
    props:{
        value:{
            type:String,
            required:true
        }
    },
    data() {
        return {
            locaName:this.value

        }
    },
    methods:{
        async updateName(){
            this.$toast.loading({
                message:'保存中...',
                forbidClick:true, //禁止背景点击
                duration:0 //持续展示
            })
            try{
                const locaName = this.locaName 
                if(!locaName.length){
                    this.$toast('昵称不能为空')
                    return
                }
                await updateUserProfile({
                    name:locaName
                })
               //更新视图
                this.$emit('input',locaName)
               //关闭弹层
               this.$emit('close')
               //提示成功
               this.$toast.success('更新昵称成功')
            }catch(err){
                this.$toast.fail('更新昵称失败')
            }
        }
    }
}
</script>

<style lang="less" scoped>
    .comment-name{
        .van_field{
            padding: 20px;
        }
    }
</style>